<template>
	<view>
		<uni-card>
			<view style="text-align: center; margin: 50rpx 30rpx; font-size: 38rpx;">欢迎注册</view>
			<uni-forms ref="form" :modelValue="form" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username" required>
					<uni-easyinput prefixIcon="person" v-model="form.username" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput prefixIcon="locked" v-model="form.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput prefixIcon="locked" v-model="form.confirmPassword" placeholder="请再次输入密码" />
				</uni-forms-item>
				<uni-forms-item>
					<view style="text-align: right;padding-top: 10px;">已经有账号？去 <navigator style="display: inline-block; color: dodgerblue; 
					margin-left: 4rpx;" url="/pages/login/login">登录</navigator></view>
				</uni-forms-item>
				<uni-forms-item>
					<button @click="register()" style="background-color: #87CEEB;">注 册</button>
				</uni-forms-item>
			
			</uni-forms>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					role: 'USER'
				},
				
				rules:{
					username: {
						rules: [
							{
								required: true,
								errorMessage: '请输入账号'
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '账号长度需要在{minLength}到{maxLength}个字符',
							}
						],
					},
					
					password: {
						rules:[
							{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '密码长度在{minLength}到{maxLength}之间'
							}
						],
					},
					
					confirmPass: {
						rules: [
							{
								required: true,
								errorMessage: '请输入确认密码'
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '确认密码长度在{minLength}到{maxLength}之间'
							}
						],
					},
					
				},
				
			}
		},
		methods: {
			register(){
				this.$refs.form.validate().then(res => {
					this.$request.post('/register',this.form).then(res => {
						if(res.code === '200'){
							uni.showToast({
								icon: 'success',
								title: '注册成功'
							})
							
							//跳转登录页面
							setTimeout(() => {
								//跳转登录页面
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 500)
						} else {
							uni.showToast({
								icon:'error',
								title: res.msg
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息: ',err)
				})
			}
		}
	}
</script>

<style>

</style>
